<template>
    <div class="points">
        <div class="content">
            <div class="title">
                导出坐标系
                <div class="close" @click="close"></div>
            </div>
            <div class="types">
                <div class="box" v-for="(item, index) in list" :key="item.src" @click="type=index">
                    <img class="img" :class="{choose:type==index}" :src="item.src"/>
                    <div class="name">{{item.name}}</div>
                </div>
            </div>
            <div class="param">
                <div class="label">width:</div>
                <input class="txt" v-model="width" placeholder="请输入缩放后的宽度" type="text"/>
                <span class="tip">不填则使用原始宽度，若高度设置则自动等比缩放宽度</span>
            </div>
            <div class="param">
                <div class="label">height:</div>
                <input class="txt" v-model="height" placeholder="请输入缩放后的高度" type="text"/>
                <span class="tip">不填则使用原始高度，若宽度设置则自动等比缩放高度</span>
            </div>
            <div class="info">原始尺寸: {{originWidth}} X {{originHeight}}</div>
            <div class="btns">
                <div class="btn" @click="make">生成坐标</div>
            </div>
            <div class="data">
                <textarea v-model="res" class="res"></textarea>
            </div>
        </div>
    </div>

</template>

<script>
import PointTooler from '../../core/tooler/PointTooler'

export default {
    data(){
        return {
            name: '',
            src: '',
            res: "",
            width: "",
            height: "",
            type: 0,
            list: [
                {
                    src: "imgs/ax1.png",
                    name: "左下"
                },
                {
                    src: "imgs/ax2.png",
                    name: "居中"
                },
                {
                    src: "imgs/ax3.png",
                    name: "左上"
                },
            ]
        }
    },
    props: ["points"],
    computed:{
        originWidth: function(){
            if(this.points){
                var bounds = PointTooler.getBounds(this.points);
                var rect = bounds.getRectangle();
                return rect.width.toFixed(2);
            }
            return 0;
        },
        originHeight: function(){
            if(this.points){
                var bounds = PointTooler.getBounds(this.points);
                var rect = bounds.getRectangle();
                return rect.height.toFixed(2);
            }
            return 0;
        }
    },
    mounted(){
        
    },
    methods: {
        close() {
            this.$emit("close");
        },
        make(){
            var ps = JSON.parse(JSON.stringify(this.points));
            console.log(ps, "ps");

            var bounds = PointTooler.getBounds(ps);
            var rect = bounds.getRectangle();
            var w = Number(this.width);
            var h = Number(this.height);
            if(!w){
                if(!h){
                    w = rect.width;
                }
                else{
                    w = h / rect.height * rect.width; 
                }
                
            }
            if(!h){
                if(!w){
                    h = rect.height;
                }
                else{
                    h = w / rect.width * rect.height;
                }
                
            }
            var scaleX = w / rect.width;
            var scaleY = h / rect.height;

            this.width = w;
            this.height = h;
            

            //原始数据  
            var str1 = PointTooler.toString(ps);
                
            PointTooler.scalePolygon(ps, scaleX, scaleY);
            //缩放数据  
            var str2 = PointTooler.toString(ps);
    
            bounds = PointTooler.getBounds(ps);
            rect = bounds.getRectangle();
            
            //左下角坐标
            if(this.type == 0){ 
                PointTooler.offsetPolygon(ps, -bounds.minX, -bounds.minY);
            }
            //居中坐标
            else if(this.type == 1){    
                PointTooler.offsetPolygon(ps, -bounds.minX - rect.width / 2, -bounds.minY - rect.height / 2);
            }
            //左上角坐标
            else if(this.type == 2){    
                PointTooler.offsetPolygon(ps, -bounds.minX, -bounds.minY);
                PointTooler.scalePolygon(ps, 1, -1);
            }
            //平移数据  
            var str3 = PointTooler.toString(ps);
            this.res = ["原始数据：" + str1, "缩放数据：" + str2, "坐标数据：" + str3].join("\n\r");
            console.log(ps, "ps");
        }
    },
}
</script>

<style lang="less" scoped>
@import './index.less';
</style>